<template>
  <a-layout-header class="school-header">
    <nav class="navbar navbar-expand-md">
      <a-button type="dashed" @click="toggleCollapsed" style=" margin-left:25px;">
        <a-icon :type="collapsed ? 'menu-unfold' : 'menu-fold'" />
      </a-button>
      <span class="navbar-brand"></span>

      <div class="collapse navbar-collapse" id="navbarSupportedContent">
        <ul class="navbar-nav mr-auto"></ul>
        <ul class="navbar-nav my-2 my-lg-0">
          <li class="nav-item">
            <a target="_blank" class="nav-link text-white" href="https://cdn.hterobot.com/vue/school/image/教务管理系统使用说明.pdf">
              <a-icon type="question-circle" />
            </a>
          </li>
          <li class="nav-item">
            <a class="nav-link" href="#">
              <a-badge count="0" dot>
                <a-avatar :src="getuser.headimg" :size="44" icon="user" />
              </a-badge>
            </a>
          </li>
          <li class="nav-item">
            <el-dropdown trigger="click">
              <span class="el-dropdown-link">
                {{ getuser.username }}
                <a-icon type="caret-down" />
              </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item class="text-center">
                  <router-link class="link" :to="{name: '个人中心'}">个人中心</router-link>
                </el-dropdown-item>
                <el-dropdown-item @click="$router.push({name: '退出'})" class="text-center">
                  <router-link class="link" :to="{name: '退出'}">退出</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </li>
        </ul>
      </div>
    </nav>
  </a-layout-header>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "school_header",
  computed: mapGetters(["getuser"]),
  props: ["toggleCollapsed", "collapsed"]
};
</script>

<style scoped>
.link {
  display: block;
  width: 100%;
}
</style>